<template>
  <div class="brief" @click="jummp">
    <h1>{{title}}</h1>
    <img src="./j-b.png" alt="">
  </div>
</template>

<script>
export default {
  name: 'brief',
  data () {
    return {
    }
  },
  props: {
    title: {
      type: String
    },
    flag: {
      type: Number
    }
  },
  methods: {
    jummp () {
      if (this.flag === 1) {
        this.$router.push('/chanye')
      }
      if (this.flag === 2) {
        this.$router.push('/jianjie')
      }
      if (this.flag === 3) {
        this.$router.push('/licheng')
      }
      if (this.flag === 4) {
        this.$router.push('/news')
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
$font-size-base:75;  //标注稿基准字体大小
$font-color-base:#333;  //基础字体颜色
// $bgColor:#f4f4f4;  //背景色
/*-------------font-size start-------------*/
@mixin font-dpr($font-size){
  font-size: $font-size;

  [data-dpr="2"] & {
    font-size: $font-size * 2;
  }

  [data-dpr="3"] & {
    font-size: $font-size * 3;
  }
}
html,body,a{
  font-family: 'microsoft yahei','Helvetica','Verdana',sans-serif;
  @include font-dpr(12px);
  color: $font-color-base;
}
.brief {
  padding: 30rem/$font-size-base;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  h1 {
    font-size: 36rem/$font-size-base;
    color: $font-color-base;
  }
  img {
    width: 16rem/$font-size-base;
    height: 28rem/$font-size-base
  }
}
/*-------------font-size end-------------*/
</style>
